<template>
  <view class="empty-state">
    <view class="empty-image">
      <image :src="imageSrc" mode="aspectFit"></image>
    </view>
    <view class="empty-content">
      <text class="empty-title">{{ title }}</text>
      <text class="empty-description" v-if="description">{{ description }}</text>
      <button class="empty-button" v-if="buttonText" @click="handleButtonClick">
        {{ buttonText }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    type: {
      type: String,
      default: 'default' // default, diary, search, network
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: ''
    },
    imageSrc: {
      type: String,
      default: ''
    }
  },
  computed: {
    defaultTitle() {
      const titles = {
        default: '暂无数据',
        diary: '还没有日记',
        search: '没有找到相关内容',
        network: '网络连接失败'
      }
      return this.title || titles[this.type]
    },
    defaultDescription() {
      const descriptions = {
        default: '',
        diary: '开始记录你的美好时光吧',
        search: '换个关键词试试',
        network: '请检查网络连接后重试'
      }
      return this.description || descriptions[this.type]
    },
    defaultImageSrc() {
      const images = {
        default: '/static/empty-default.png',
        diary: '/static/empty-diary.png',
        search: '/static/empty-search.png',
        network: '/static/empty-network.png'
      }
      return this.imageSrc || images[this.type]
    }
  },
  methods: {
    handleButtonClick() {
      this.$emit('buttonClick')
    }
  }
}
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
  min-height: 400rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.empty-image image {
  width: 100%;
  height: 100%;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.empty-title {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 20rpx;
}

.empty-description {
  font-size: 28rpx;
  color: #999999;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

.empty-button {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}

.empty-button::after {
  border: none;
}
</style> 